<template>
  <div class="countdown">
    <template v-if="msTime.show">

      <div class="size">
        <LImage class="img-bg" :src="Config.img('djs/djs_bg.png')"></LImage>
        <LImage
          class="img-title"
          :src="Config.img('djs/djs_tian.png')"
        ></LImage>
        <div class="size-content">
          <LImage class="img-shu" 
          v-for="(value, index) in msTime.day" :key="'day'+index" 
          :src="Config.img('djs/djs_' + value + '.png')"></LImage>
        </div>
      </div>
      <LImage class="img-dian" :src="Config.img('djs/djs_mao.png')"></LImage>

      <div class="size">
        <LImage class="img-bg" :src="Config.img('djs/djs_bg.png')"></LImage>
        <LImage class="img-title" :src="Config.img('djs/djs_shi.png')"></LImage>
        <div class="size-content">
          <LImage class="img-shu" 
          v-for="(value, index) in msTime.hour" :key="'hour'+index" 
          :src="Config.img('djs/djs_' + value + '.png')"></LImage>
        </div>
      </div>
      <LImage class="img-dian" :src="Config.img('djs/djs_mao.png')"></LImage>

      <div class="size">
        <LImage class="img-bg" :src="Config.img('djs/djs_bg.png')"></LImage>
        <LImage class="img-title" :src="Config.img('djs/djs_fen.png')"></LImage>
        <div class="size-content">
          <LImage class="img-shu" 
          v-for="(value, index) in msTime.minutes" :key="'minutes'+index" 
          :src="Config.img('djs/djs_' + value + '.png')"></LImage>
        </div>
      </div>
      <LImage class="img-dian" :src="Config.img('djs/djs_mao.png')"></LImage>

      <div class="size">
        <LImage class="img-bg" :src="Config.img('djs/djs_bg.png')"></LImage>
        <LImage
          class="img-title"
          :src="Config.img('djs/djs_miao.png')"
        ></LImage>
        <div class="size-content">
          <LImage class="img-shu" 
          v-for="(value, index) in msTime.seconds" :key="'seconds'+index" 
          :src="Config.img('djs/djs_' + value + '.png')"></LImage>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
const weexFunction = weex.requireModule("WeexFunction");
import jconfig from "@/_js/config";
export default {
  replace: true,
  data() {
    return {
      Config: jconfig,

      msTime: {
        show: false, //倒计时状态
        day: [], //天
        hour: [], //小时
        minutes: [], //分钟
        seconds: [], //秒
      },
      current: "", //当前时间
      end: "", //活动结束时间
    };
  },

  watch: {
    currentTime: function (val, oldval) {
      this.gogogo();
    },
  },

  props: {
    //当前时间
    currentTime: {
      type: Number,
    },
    // 结束时间
    endTime: {
      type: Number,
    },
  },

  mounted() {
    this.gogogo();
  },

  methods: {
    //开始
    gogogo() {
      //判断是秒还是毫秒
      if (this.currentTime) {
        this.currentTime.toString().length == 10
          ? (this.current = this.currentTime * 1000)
          : (this.current = this.currentTime);
      } else {
        this.current = new Date().getTime();
      }
      this.endTime.toString().length == 10
        ? (this.end = this.endTime * 1000)
        : (this.end = this.endTime);

      if (this.end < this.current) {
        this.msTime.show = false;
        this.end_message();
      } else {
        this.start_message();
      }
    },

    //运行时间
    runTime(startTime, endTime, callFun) {
      let msTime = this.msTime;
      let timeDistance = startTime - endTime;
      if (timeDistance > 0) {

        var day = Math.floor(timeDistance / 86400000);
        msTime.day = this.getTimeArr(day, 3);
        timeDistance -= day * 86400000

        var hour = Math.floor(timeDistance / 3600000);
        msTime.hour = this.getTimeArr(hour, 2);
        timeDistance -= hour * 3600000;

        var minutes = Math.floor(timeDistance / 60000);
        msTime.minutes = this.getTimeArr(minutes, 2);
        timeDistance -= minutes * 60000;

        var seconds = Math.floor(timeDistance / 1000).toFixed(0);
        msTime.seconds = this.getTimeArr(seconds, 2);
        timeDistance -= seconds * 1000;

        msTime.show = true;

        let _s = Date.now();
        let _e = Date.now();
        let diffPerFunc = _e - _s;
        setTimeout(() => {
          this.runTime(startTime, (endTime += 1000), callFun);
        }, 1000 - diffPerFunc);
      } else {
        callFun();
      }
    },

    getTimeArr(time, count) {

      time = time + '';
      var strs = time.split('');
      var arr = [];
      var length = count - time.length;
      for (let index = 0; index < length; index++) {
        arr.push('0');
      }
      arr.push(...strs);
      return arr;
    },

    //开始倒计时
    start_message() {
      setTimeout(() => {
        this.runTime(this.end, this.current, this.end_message);
      }, 1);
    },

    //结束倒计时
    end_message() {
      this.msTime.show = false;
    },
  },
};
</script>

<style src="@/_css/style.css" ></style>
<style scoped>
.countdown {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
}

.size {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img-bg {
  width: 110px;
  height: 116px;
  margin-bottom: 10;
}
.img-title {
  width: 100px;
  height: 22px;
}
.img-dian {
  width: 8px;
  height: 32px;
  margin-top: 42px;
}
.size-content {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  width: 110px;
  height: 116px;
}
.img-shu {
  width: 25px;
  height: 64px;
}
</style>